<script lang="ts" setup>
import { reactive, ref, computed } from "vue"
import ScratchCard from "@/components/ScratchCard/index.vue"
const getImageUrl = computed(() => {
  return (url: any) => new URL(`../../../assets/layouts/${url}`, import.meta.url).href
})
const mouseMoveX = ref(0)
const mouseBegin = ref(0)
const transition = ref("opacity 500ms")
const enter = (e: MouseEvent) => {
  transition.value = "opacity 500ms"
  mouseBegin.value = e.offsetX
  return
}
const move = (e: MouseEvent) => {
  mouseMoveX.value = e.offsetX - mouseBegin.value
  mouseBegin.value = e.offsetX
  imgArr.forEach((item, index) => {
    if (index !== 0) item.transformX = item.transformX - index * mouseMoveX.value * 0.01
    if (index == 5 || index == 4) {
      if (e.offsetX > 500) {
        imgArr[4].opacity = 1
        imgArr[5].opacity = 0
      } else {
        imgArr[4].opacity = 0
        imgArr[5].opacity = 1
      }
    }
    if (index == 9) {
      item.transformY = item.transformY + index * mouseMoveX.value * 0.001
    }
    if (index === 11) {
      if (item.rotate !== undefined) {
        item.rotate = item.rotate - index * mouseMoveX.value * 0.001
        item.rotate = item.rotate > 5 ? 5 : item.rotate
        item.rotate = item.rotate < -5 ? -5 : item.rotate
      }
    }
  })
}
const leave = () => {
  transition.value = "transform 500ms"
  mouseMoveX.value = 0
  mouseBegin.value = 0
  imgArr.forEach((item, index) => {
    if (index !== 0) item.transformX = item.transformX1
    if (index === 9) item.transformY = 0
    item.rotate = 0
  })
}
const imgArr = reactive([
  { name: "layer0", url: "layer0.webp", with: 1800, height: 168.6, transformX: 0, transformX1: 0, transformY: 0 },
  {
    name: "layer1",
    url: "layer1.webp",
    with: 52.8,
    height: 648.6,
    transformX: 90,
    transformX1: 90,
    transformY: -18
  },
  {
    name: "layer2",
    url: "layer2.webp",
    with: 1278,
    height: 168.6,
    transformX: 210,
    transformX1: 210,
    transformY: 9
  },
  {
    name: "layer3",
    url: "layer3.webp",
    with: 16673.4,
    height: 168.6,
    transform: "translate(-96px,6px)",
    transformX: -96,
    transformX1: -96,
    transformY: 6
  },
  {
    name: "layer4",
    url: "layer4.webp",
    with: 856.2,
    height: 132.6,
    transform: "translate(-120px,24px)",
    transformX: -120,
    transformX1: -120,
    transformY: 24,
    opacity: 1,
    rotate: -6
  },
  {
    name: "layer5",
    url: "layer5.webp",
    with: 856.2,
    height: 132.6,
    transform: "translate(-120px,24px)",
    transformX: -120,
    transformX1: -120,
    transformY: 24,
    opacity: 0
  },
  {
    name: "layer6",
    url: "layer6.webp",
    with: 79.1,
    height: 42,
    transform: "translate(-525px,35px)",
    transformX: -525,
    transformX1: -525,
    transformY: 35
  },
  {
    name: "layer7",
    url: "layer7.webp",
    with: 189,
    height: 97.2,
    transform: "translate(-570px,42px)",
    transformX: -570,
    transformX1: -570,
    transformY: 42
  },
  {
    name: "layer8",
    url: "layer8.webp",
    with: 89.1,
    height: 31.9,
    transform: "translate(357.5px,71.5px)",
    transformX: 357.5,
    transformX1: 357.5,
    transformY: 71.5
  },
  {
    name: "layer9",
    url: "layer9.webp",
    with: 63.5,
    height: 38,
    transform: "translate(60px,0px)",
    transformX: 60,
    transformX1: 60,
    transformY: 0
  },
  {
    name: "layer10",
    url: "layer10.webp",
    with: 285.6,
    height: 108.6,
    transform: "translate(-120px,12px)",
    transformX: -120,
    transformX1: -120,
    transformY: 12
  },
  {
    name: "layer11",
    url: "layer11.webp",
    with: 243.1,
    height: 59.8,
    transform: "translate(-182px,39px)",
    transformX: -182,
    transformX1: -182,
    transformY: 39,
    rotate: 0
  },
  {
    name: "layer12",
    url: "layer12.webp",
    with: 1860,
    height: 207.75,
    transform: "translate(-22.5px,-3.75px)",
    transformX: -22.5,
    transformX1: -22.5,
    transformY: -3.75
  },
  {
    name: "layer13",
    url: "layer13.webp",
    with: 184.2,
    height: 82.8,
    transform: "translate(-252px,-48px)",
    transformX: -252,
    transformX1: -252,
    transformY: -48
  },
  {
    name: "layer14",
    url: "layer14.webp",
    with: 2100,
    height: 196.7,
    transform: "translate(0px,-14px)",
    transformX: 0,
    transformX1: 0,
    transformY: -14
  }
])
</script>

<template>
  <div class="app-container">
    <div class="bili-header__banner">
      <div class="animated-banner">
        <div
          class="layer"
          v-for="(item, index) in imgArr"
          :key="item.name"
          @mousemove="move"
          @mouseenter="enter"
          @mouseleave="leave"
        >
          <img
            :src="getImageUrl(item.url)"
            :alt="item.name"
            :style="{
              transform: `translate(${item.transformX}px,${item.transformY}px) rotate(${item.rotate || 0}deg) `,
              width: item.width + 'px',
              height: item.height + 'px',
              opacity: item.opacity == 0 ? 0 : 1,
              transition: transition
            }"
            :ref="'img' + index"
          />
        </div>
      </div>
    </div>
    <component :is="ScratchCard" :width="300" :height="300" color="gray" />
    <el-empty description="Admin 权限可见" />
  </div>
</template>

<style lang="scss" scoped>
.center {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bili-header__banner {
  position: relative;
  z-index: 0;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  min-width: 1000px;
  min-height: 155px;
  height: 9.375vw;
  max-height: 240px;
  background-color: #e3e5e7;
  background-position: center 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.animated-banner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .layer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
